<template>
  <div class="custom-query-wrapper" >
    <!--  ag-theme-quartz-->
      <!--       :gridOptions="gridOptions" -->
    <ag-grid-vue
      style="width: '100%'; height: '100%';"
      class="ag-theme-quartz"
      :columnDefs="columnDefs"
      :rowData="rowData"
      :gridApi="gridApi"
      :gridOptions="gridOptions"
      :locale-text="localeText"
    >
    </ag-grid-vue>
  </div>
</template>
  
  <script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
// npm install @ag-grid-community/core @ag-grid-community/locale --save
import { AG_GRID_LOCALE_CN } from "@ag-grid-community/locale";
import { AgGridVue } from "ag-grid-vue";

export default {
  name: "ag-grid-table",
  props: {
    // 定义一个名为 rawLeftTableData 的 prop，类型为 Array
    rowData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      columnDefs: [],
      localeText: {},
      gridApi: null,
      gridOptions: {
        domLayout: 'autoHeight', // 启用自动高度
      },
    };
  },
  components: {
    AgGridVue,
  },
  mounted() {
    this.initGrid();
    this.localeText = AG_GRID_LOCALE_CN;
  },
  methods: {
    checkTime(str)
    {
     const regex = /时间|time/;
      return regex.test(str);
    },
    checkNumber(str)
    {
     const regex = /销量|sale|销售额/;
      return regex.test(str);
    },
    initGrid() {
      // 字段名到中文表头的映射关系
      const headerMapping = {
        cust_segment: "客户等级",
        cust_id: "客户编号",
        licence_no: "许可证编号",
        store_name: "店铺名称",
        county_id: "县编号",
        market_id: "市场编号",
        artificial_person: "法人",
        created_time: "创建时间",
        periods: "周期",
        sales_volume: "销售额",
        brand_name: "雪茄品牌",
        overnight_shop: "是否夜店",
        id_card:"身份证号",
        phone:"电话/联系方式",
        //sales_volume:'库存'//库存和销量用的一个字段？
      };
      const keys = Object.keys(this.rowData[0]);
      this.columnDefs = keys.map((key) => {
        const columnDef = {
          field: key,
          width:150,
          headerName: headerMapping[key],
          filter: this.checkTime(key)
            ? "agDateColumnFilter"
            : this.checkNumber(key)
            ? "agNumberColumnFilter"
            : "agTextColumnFilter",
          filterParams: {
            comparator: (filterValue, cellValue) => {
              if (this.checkNumber(key)) {
                const numFilterValue = String(filterValue);
                const numCellValue = String(cellValue);
                console.log("6666");
                return numFilterValue === numCellValue;
              }
              return filterValue === cellValue; // 默认的字符串比较
            },
          },
        };
        // if (this.checkNumber(key)) {
        //   columnDef.filterParams.comparator = (filterValue, cellValue) => {
        //      console.log(`Comparing filterValue: ${String(filterValue)} with cellValue: ${cellValue}`); // 调试信息
        //     return String(filterValue) === String(cellValue);
        //   };
        // }
        if (this.checkNumber(key)) {
          columnDef.filterParams.comparator = (filterValue, cellValue) => {
            const numFilterValue = parseFloat(filterValue);
            const numCellValue = parseFloat(cellValue);
            console.log(
              `Comparing filterValue: ${numFilterValue} with cellValue: ${numCellValue}`
            ); // 调试信息
            return numFilterValue === numCellValue;
          };
        }
        return columnDef;
      });
    },
  },
};
</script>
<style scoped>
.custom-query-wrapper {
  width:700px;
  /* height: 700px; */
  min-width: 400px;
  /* min-height: 100px; 设置最小高度 */
  max-height: 600px; /* 最大高度 */
}
/* 内容部原始样式 */
::v-deep .ag-aria-description-container {
  display: none !important;
}
</style>